<template>
	<Layout class="p-5 bg-white">
		<div class="p-5-1">
			<Form class="p-5" label-position="right" :label-width="200">
				<FormItem class="w-50" label="仓库管理员 :">
					<label>{{outboundHeaderWithItem.userName}}</label>
				</FormItem>
				<FormItem class="w-50" label="请选择出库仓库:">
					<Select class="w-100" v-model="outboundHeaderWithItem.warehouseId" clearable placeholder="请选择仓库">
						<Option v-for="item in warehouseNames"  :value="item.warehouseId"  >{{item.warehouseName}}
						</Option>
					</Select>
				</FormItem>
				<FormItem class="w-50" label="请输入销售批次号:">
					<Input v-model="outboundHeaderWithItem.saleId" maxlength="9" clearable placeholder="请输入销售批次号:"></Input>
				</FormItem>

				<Button type="error" @click="newOutbound">新增</Button>
				
				<Modal v-model="modal" title="请选择商品" @on-ok="submit()" @on-cancel="cancel()" ok-text="保存"
					cancel-text="取消">
					<table class="ta">
						<tr>
							<td>请选择商品类型：</td>
							<td>
								<Select v-model="OutboundItem.productType" clearable placeholder="请选择商品类别" @on-change="selectProductName()">
									<Option v-for=" item in productTypes" :value="item">{{item}}
									</Option>
								</Select>
							</td>
						</tr>
						<tr>
							<td>请选择商品名称：</td>
							<td>
								<Select v-model="OutboundItem.productName" @on-change="selectProduct()">
									<Option v-for="item in productNames" :value="item.productName">{{item.productName}}
									</Option>
								</Select>
							</td>
						</tr>
						<tr>
							<td>请输入出库数量：</td>
							<td>
								<Input v-model="OutboundItem.outboundProductNum" maxlength="9" clearable
									placeholder="请输入出库数量" @on-change ="checkNum()"></Input>
							</td>
						</tr>
					</table>
				</Modal>

				<Table :columns="tableInfo.columnInfo" :data="outboundHeaderWithItem.outboundItemList">
					<template slot-scope="{ row, index }" slot="action">
						<Button type="error" size="small" @click="remove(row.productId)">删除</Button>
					</template>
				</Table>
				<FormItem class="text-left">
					<Button @click="save()" type="primary" >保存</Button>
					<Button @click="back()" style="margin-left: 40px">返回</Button>
				</FormItem>
			</Form>
		</div>

	</Layout>
</template>

<script>
	import local from '../../common/_local.js';
	export default {
		data: function() {
			return {
				maxNum:"",
				modal: false,
				outboundHeaderWithItem: {
					userId: "", //仓库管理员编号
					userName: "", //仓库管理员姓名
					warehouseId: "", //仓库名
					saleId: "", //销售订单编号
					outboundItemList: [] //新增出库体
				},
				OutboundItem: {
					productId: "", //产品编号
					productType: "", //产品类型
					productName: "", //产品名称
					outboundProductNum: "", //出库数量
				},
				warehouseNames: [], //所有仓库名
				productTypes: [], //所有商品类型
				productNames: [], //所有商品名称
				tableInfo: {

					columnInfo: [{
							title: "产品批次号",
							key: "productId",
							align: 'center',
						},
						{
							title: "产品类型",
							key: "productType",
							align: 'center',
						},
						{
							title: "产品名称",
							key: "productName",
							align: 'center',
						},
						{
							title: "出库数量",
							key: "outboundProductNum",
							align: 'center',
						},
						{
							title: "操作",
							align: 'center',
							slot: 'action',
						}
					],

				},
			}
		},
		created: function() {
			this.outboundHeaderWithItem.userName = local.getItem("USER_NAME"); //11
			this.allWarehouse();
		},
		methods: {
	
			allWarehouse: function() {
				var storeId = local.getItem("STORE_ID");
				this.http.get({ //获取所有仓库名称
					url: "/warehouse/info/all/g",
					param : {
						storeId : storeId
					}
				}).then(data => {
					this.warehouseNames = data.resultData;
					this.outboundHeaderWithItem.userId = data.resultData[0].userId;
				});
			},
			newOutbound: function() {
				//当点击新增的时候，将中间的盒子显示
				this.modal = true;
				this.allProductType();
			},
			allProductType: function() {
				this.http.get({ //获取所有商品类型
					url: "/product/type_list"
				}).then(data => {
					this.productTypes = data;
				});
			},
			selectProduct: function() {
				for (let i = 0; i < this.productNames.length; i++) {
					if (this.OutboundItem.productName == this.productNames[i].productName) {
						this.OutboundItem.productId = this.productNames[i].productId;
						this.maxNum = this.productNames[i].num;
						break;
					}
				}
			},
			 selectProductName: function(){
				let warehouseId = local.getItem("WAREHOUSE_ID");
				this.http.get({ //获取所有商品名称
					url: "/product/get_name",
					param: { warehouseId :  warehouseId,
					         type : this.OutboundItem.productType
					}    
				}).then(data => {
					this.productNames = data;
					
				});
			},
			checkNum: function(){
				if(this.OutboundItem.outboundProductNum>this.maxNum){
					this.$Message.info('超出最大库存数量'+ this.maxNum);//试试
				}
			},
			submit: function() {
				//把出库体新增一条放入数组
				if (!this.util.isRealNum(this.OutboundItem.outboundProductNum) || this.OutboundItem.outboundProductNum < 0) {
					this.message.error("出库数量不符合规范");
					return;
				}
				this.outboundHeaderWithItem.outboundItemList.push(this.OutboundItem);
				this.$Message.info('点击了保存');
				this.modal = false;
			},
			cancel: function() {
				//点返回，中间盒子的样式变成隐藏
				this.$Message.info('点击了返回');
				this.modal = false;
				this.OutboundItem = {
					productId: "",
					productType: "",
					productName: "",
					outboundProductNum: ""
				}
			},

			remove: function(productId) {
				for (let i = 0; i < this.outboundHeaderWithItem.outboundItemList.length; i++) {
					if (productId == this.outboundHeaderWithItem.outboundItemList[i].productId) {
						this.outboundHeaderWithItem.outboundItemList.splice(i, 1);
						this.message.info("删除成功");
						break;
					}
				}
				this.OutboundItem = {
					productId: "",
					productType: "",
					productName: "",
					outboundProductNum: ""
				}

			},
			save: function() {
				//调用新增接口
				if (!this.util.isRealNum(this.outboundHeaderWithItem.saleId) || this.outboundHeaderWithItem.saleId < 0) {
					this.message.error("销售批次号不符合规范");
					return;
				}
				let outboundHeaderWithItem = this.outboundHeaderWithItem;				
				this.http.post({
					url: "/outbound/info",
					param: outboundHeaderWithItem
				}).then(res => {
					this.message.info("出库新增成功");
					this.$tabs.close();
				})
			},
			back: function() {
				this.message.info("已返回");
				this.$tabs.close();
			}
		},
	}
</script>

<style scoped="scoped">
	.sel {
		width: 200px
	}


	.temBut {
		margin-right: 5px
	}

	.ta tr td {
		width: 180px;
	}

	.p-5-1 {
		margin: 0 auto;
		width: 70%;
	}
</style>
